<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="include/adminHeader::html('任务管理')">

	<style>
        .panel01{
            panel panel-default;
        }
        .panel02{
            panel panel-success;
        }
    </style>

</head>

<body>
	<div th:replace="include/adminNavigator::html"></div>
	<div id="workingArea">
		<br>
		<div class="input-group input-group-lg col-xs-4">
			<input type="text" class="form-control" placeholder="Search for task name"
			@keyup.enter="search" v-model.trim="bean.taskName"> 
			<span class="input-group-btn">
				<button  href="#nowhere"  @click="search" class="btn btn-default" type="button">搜索</button>
			</span>
		</div>

		<br> <br>
		<div v-for="bean in beans ">
			<div v-if="bean.status == '0'">
  				<div class="panel panel-default"  >
					<div class="panel-heading">{{bean.taskName}}</div>
					<div class="panel-body">
						<span>
							是否启动：{{bean.status}}
						</span>		
									
						<span>
							正确率：{{bean.score}}%
						</span>
					</div>
				</div>
			</div>
			<div v-else>
				<div v-if="bean.score < '80'">
	  				<div class="panel panel-danger"  >
						<div class="panel-heading">{{bean.taskName}}</div>
						<div class="panel-body">
						<span>
							是否启动：{{bean.status}}
						</span>		
									
						<span>
							正确率：{{bean.score}}%
						</span>
					</div>
					</div>
				</div>
				<div v-else-if="bean.score < '95'">
					<div class="panel panel-info"  >
						<div class="panel-heading">{{bean.taskName}}</div>
						<div class="panel-body">
						<span>
							是否启动：{{bean.status}}
						</span>		
									
						<span>
							正确率：{{bean.score}}%
						</span>
					</div>
					</div>
				</div>
				<div v-else>
					<div class="panel panel-success"  >
						<div class="panel-heading">{{bean.taskName}}</div>
						<div class="panel-body">
						<span>
							是否启动：{{bean.status}}
						</span>		
									
						<span>
							正确率：{{bean.score}}%
						</span>
					</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>

<script>
	var data4Vue = {
	    uri:'taskManager',
	    beans: [],
	    bean: {taskId:0, taskName:'', taskStatus:''}
	};
	
	//ViewModel
	var vue = new Vue({
	    el: '#workingArea',
	    data: data4Vue,
	    // mounted　表示这个 Vue 对象加载成功了
	    mounted:function(){ 
	    	this.search('');
	    },
	    methods: {
	        search: function () {
	            var taskName = this.bean.taskName;
	            var url = "taskManager" + "?taskName=" + taskName;
	            axios.get(url).then(function(response){
                    vue.beans = response.data;
	            });
	        },
	        // 翻页 定义在adminHeader.html中
	        jump: function(page){	        	
	            jump(page,vue); 
	        },
	        jumpByNumber: function(start){
	            jumpByNumber(start,vue);
	        }
	    }
	    
	    
	    
	});
	
	
	
	function changeStyle(condition) {
		alert("panel-default");
		return "panel-default";
	};
</script>


</html>